<template>
	<view class="profile-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar" @click="getUserProfile">
				<image class="avatar-img" :src="userAvatar" mode="aspectFill"></image>
				<view class="avatar-mask" v-if="loading">
					<text class="loading-icon">⌛</text>
				</view>
			</view>
			<view class="user-info">
				<text class="user-name">张三</text>
				<text class="user-department">研发部 - 高级工程师</text>
				<text class="user-id">工号：20240001</text>
			</view>
			<view class="user-action">
				<text class="edit-icon" @click="editProfile">✏️</text>
			</view>
		</view>

		<!-- 统计信息 -->
		<view class="stats-section">
			<view class="stats-grid">
				<view class="stats-item">
					<text class="stats-number">12</text>
					<text class="stats-label">待办事项</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">8</text>
					<text class="stats-label">本月申请</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">95%</text>
					<text class="stats-label">出勤率</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">5</text>
					<text class="stats-label">剩余年假</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-group">
				<text class="group-title">我的申请</text>
				<view class="menu-item" @tap="navigateTo('/pages/leave/leave')">
					<view class="menu-icon">📅</view>
					<text class="menu-text">请假申请</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @tap="navigateTo('/pages/business-trip/business-trip')">
					<view class="menu-icon">✈️</view>
					<text class="menu-text">出差申请</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @tap="navigateTo('/pages/expense/expense')">
					<view class="menu-icon">🧾</view>
					<text class="menu-text">费用报销</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @tap="navigateTo('/pages/purchase/purchase')">
					<view class="menu-icon">🛒</view>
					<text class="menu-text">采购申请</text>
					<text class="menu-arrow">></text>
				</view>
			</view>

			<view class="menu-group">
				<text class="group-title">审批管理</text>
				<view class="menu-item" @tap="showToast('功能开发中')">
					<view class="menu-icon">📋</view>
					<text class="menu-text">待我审批</text>
					<view class="menu-badge">3</view>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @tap="showToast('功能开发中')">
					<view class="menu-icon">📊</view>
					<text class="menu-text">审批记录</text>
					<text class="menu-arrow">></text>
				</view>
			</view>
			<view class="menu-group">
				<text class="group-title">项目管理</text>
				<view class="menu-item" @tap="navigateTo('/pages/project/project')">
					<view class="menu-icon">📍</view>
					<text class="menu-text">项目位置</text>
					<text class="menu-arrow">></text>
				</view>
			</view>

			<view class="menu-group">
				<text class="group-title">其他功能</text>
				<view class="menu-item" @tap="navigateTo('/pages/seal/seal')">
					<view class="menu-icon">🔖</view>
					<text class="menu-text">用章申请</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @tap="navigateTo('/pages/vehicle/vehicle')">
					<view class="menu-icon">🚗</view>
					<text class="menu-text">用车申请</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @tap="navigateTo('/pages/payment/payment')">
					<view class="menu-icon">💰</view>
					<text class="menu-text">付款申请</text>
					<text class="menu-arrow">></text>
				</view>
			</view>

			<view class="menu-group">
				<text class="group-title">设置</text>
				<view class="menu-item" @tap="showToast('功能开发中')">
					<view class="menu-icon">🔔</view>
					<text class="menu-text">消息通知</text>
					<switch class="menu-switch" :checked="notificationEnabled" @change="toggleNotification"></switch>
				</view>
				<view class="menu-item" @tap="showToast('功能开发中')">
					<view class="menu-icon">🌙</view>
					<text class="menu-text">深色模式</text>
					<switch class="menu-switch" :checked="darkMode" @change="toggleDarkMode"></switch>
				</view>
				<view class="menu-item" @tap="showToast('功能开发中')">
					<view class="menu-icon">🔒</view>
					<text class="menu-text">隐私设置</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @tap="showToast('功能开发中')">
					<view class="menu-icon">❓</view>
					<text class="menu-text">帮助与反馈</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @tap="showToast('功能开发中')">
					<view class="menu-icon">ℹ️</view>
					<text class="menu-text">关于我们</text>
					<text class="menu-arrow">></text>
				</view>
			</view>
		</view>

		<!-- 退出登录 -->
		<view class="logout-section">
			<button class="logout-button" @tap="logout">退出登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { userApi } from '@/common/api'
import { getCurrentUser } from '@/common/auth'

const notificationEnabled = ref(true)
const darkMode = ref(false)
const userAvatar = ref('/static/avatar.png')
const loading = ref(false)

// 获取用户信息
const loadUserInfo = async () => {
	try {
		const user = getCurrentUser()
		if (user && user.avatarUrl) {
			userAvatar.value = user.avatarUrl
		}
	} catch (error) {
		console.error('获取用户信息失败:', error)
	}
}

// 获取用户头像
const getUserProfile = async () => {
	console.log('点击头像，开始获取用户信息')
	if (loading.value) {
		console.log('正在加载中，忽略点击')
		return
	}
	
	// #ifdef MP-WEIXIN
	loading.value = true
	try {
		console.log('调用uni.getUserProfile')
		// 使用 Promise 包装 uni.getUserProfile
		const result = await new Promise((resolve, reject) => {
			uni.getUserProfile({
				desc: '用于完善用户资料',
				success: (res) => {
					console.log('getUserProfile success:', res)
					resolve(res)
				},
				fail: (err) => {
					console.error('getUserProfile fail:', err)
					reject(err)
				}
			})
		})
		
		console.log('获取用户信息成功:', result)
		const avatarUrl = result.userInfo.avatarUrl
		
		// 保存头像到服务器
		console.log('开始保存头像到服务器')
		await userApi.updateAvatar(avatarUrl)
		
		// 更新本地显示
		userAvatar.value = avatarUrl
		
		uni.showToast({
			title: '头像更新成功',
			icon: 'success'
		})
	} catch (err) {
		console.error('获取或更新头像失败:', err)
		uni.showToast({
			title: err.errMsg || '获取头像失败',
			icon: 'error'
		})
	} finally {
		loading.value = false
	}
	// #endif
	
	// #ifndef MP-WEIXIN
	uni.showToast({
		title: '此功能仅在微信小程序中可用',
		icon: 'none'
	})
	// #endif
}

// 页面加载时获取用户信息
onMounted(() => {
	loadUserInfo()
})

const editProfile = () => {
	uni.showToast({
		title: '编辑功能开发中',
		icon: 'none'
	})
}

const navigateTo = (url) => {
	uni.navigateTo({
		url: url
	})
}

const showToast = (message) => {
	uni.showToast({
		title: message,
		icon: 'none'
	})
}

const toggleNotification = (e) => {
	notificationEnabled.value = e.detail.value
	uni.showToast({
		title: notificationEnabled.value ? '已开启通知' : '已关闭通知',
		icon: 'none'
	})
}

const toggleDarkMode = (e) => {
	darkMode.value = e.detail.value
	uni.showToast({
		title: darkMode.value ? '已开启深色模式' : '已关闭深色模式',
		icon: 'none'
	})
}

const logout = () => {
	uni.showModal({
		title: '确认退出',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				})
				// 这里可以添加退出登录的逻辑
			}
		}
	})
}
</script>

<style scoped>
.profile-container {
	padding: 32rpx;
	background-color: #f5f6fa;
	min-height: 100vh;
}

.user-card {
	background: linear-gradient(135deg, #2B5BA1, #4A90E2);
	border-radius: 16rpx;
	padding: 40rpx 32rpx;
	margin-bottom: 32rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 8rpx 24rpx rgba(43, 91, 161, 0.3);
}

.user-avatar {
	margin-right: 24rpx;
	position: relative;
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.user-avatar:active {
	opacity: 0.8;
}

.avatar-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.avatar-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-icon {
	color: white;
	font-size: 40rpx;
}

.user-info {
	flex: 1;
}

.user-name {
	font-size: 40rpx;
	font-weight: 600;
	color: white;
	display: block;
	margin-bottom: 12rpx;
}

.user-department {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	display: block;
	margin-bottom: 8rpx;
}

.user-id {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.7);
}

.user-action {
	padding: 16rpx;
}

.edit-icon {
	font-size: 32rpx;
	color: white;
}

.stats-section {
	background: white;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32rpx;
}

.stats-item {
	text-align: center;
}

.stats-number {
	font-size: 48rpx;
	font-weight: bold;
	color: #2B5BA1;
	display: block;
	margin-bottom: 8rpx;
}

.stats-label {
	font-size: 24rpx;
	color: #666;
}

.menu-section {
	margin-bottom: 32rpx;
}

.menu-group {
	background: white;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.group-title {
	font-size: 28rpx;
	color: #666;
	padding: 24rpx 32rpx 16rpx;
	display: block;
	background: #f8f9fa;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 32rpx;
	border-bottom: 1rpx solid #f0f0f0;
	transition: background-color 0.3s ease;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item:active {
	background-color: #f8f9fa;
}

.menu-icon {
	font-size: 32rpx;
	margin-right: 24rpx;
	width: 48rpx;
	text-align: center;
}

.menu-text {
	flex: 1;
	font-size: 32rpx;
	color: #333;
}

.menu-badge {
	background: #ff4757;
	color: white;
	font-size: 20rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	margin-right: 16rpx;
	min-width: 32rpx;
	text-align: center;
}

.menu-arrow {
	font-size: 28rpx;
	color: #ccc;
}

.menu-switch {
	transform: scale(0.8);
}

.logout-section {
	padding: 32rpx 0;
}

.logout-button {
	width: 100%;
	background: #f44336;
	color: white;
	border: none;
	border-radius: 12rpx;
	padding: 32rpx;
	font-size: 32rpx;
	font-weight: 500;
}

.logout-button:active {
	background: #d32f2f;
}
</style> 